<script setup>
import { reactive, ref } from 'vue';
import { setUser, getQuestion } from "../api/index";
import QuestionItem from "./QuestionItem.vue";
import { useUserMsg } from '../stores/user';
const userMsg = useUserMsg();

const nickname = ref(userMsg.msg.nickname);
const mobile = ref(userMsg.msg.mobile);
const avatar = ref([{ url: userMsg.msg.avatar }]);

const afterRead = ()=>{
  // console.log(avatar.value[0].content);
}

const submitFn = values=>{
  values.avatar = avatar.value[0].content;
  setUser(values).then(res=>{
    console.log(res);
  })
}

const questionList = reactive([]);
getQuestion({
  pagenum:3,
  pagesize: 4
}).then(res=>{
  questionList.push(...res.data.data.list);
})

const answerList = reactive([]);
getQuestion({
  pagenum:4,
  pagesize: 4
}).then(res=>{
  answerList.push(...res.data.data.list);
})

</script>

<template>
  <div class="myBox">
    <van-form @submit="submitFn">
      <van-cell-group inset>
        <van-uploader v-model="avatar" multiple :after-read="afterRead" :max-count="1" />
        <van-field
          v-model="nickname"
          name="nickname"
          label="姓名"
          placeholder="姓名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="mobile"
          name="mobile"
          label="手机号"
          placeholder="手机号"
          readonly
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
    <van-tabs :active="0">
      <van-tab title="我的提问">
        <QuestionItem v-for="item in questionList" :value="item" :key="item.id" />
      </van-tab>
      <van-tab title="我的回答">
        <QuestionItem v-for="item in answerList" :value="item" :key="item.id" />
      </van-tab>
    </van-tabs>
  </div>
</template>